<template>
  <view class="index-content">
    <!-- 我的服务 -->
    <view class="service-section">
      <text class="section-title">我的服务</text>
      <view v-if="!hasPermissions" class="no-permission">
        <text>您暂无菜单权限，请联系管理员</text>
      </view>
      <view v-else class="nav_each">
        <view
          class="nav_view"
          v-for="(item, index) in filteredNavList"
          @click="$goBack(item.path)"
          :key="index"
        >
          <image class="nav_img" :src="item.src1" mode="widthFix"></image>
          <text class="nav_text">{{ item.label }}</text>
        </view>
      </view>
    </view>
    <!-- 常用功能 -->
    <view class="function-section" v-if="hasPermissions">
      <view class="function-grid">
        <view
          class="function-item"
          v-for="(item, index) in frequentlyList"
          :key="index"
          @click="$goBack(item.path)"
        >
          <view class="icon-wrapper">
            <image
              class="function_img"
              :src="item.src1"
              mode="widthFix"
            ></image>
            <text class="function-text">{{ item.label }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { hasMenuPermission } from "@/common/permissionControl.js";

export default {
  data() {
    return {
      navList: [
        {
          src1: "/static/index/nav1.png",
          label: "政务服务",
          path: "/pages/hub_ygzw/index/index",
          menuItem: "government",
        },
        {
          src1: "/static/index/nav2.png",
          label: "驾培服务",
          path: "/pages/hub_zsyg/prac/draw/index/index",
          menuItem: "driverTraining",
        },
        {
          src1: "/static/index/nav3.png",
          label: "检测服务",
          path: "/pages/hub_zsyg/prac/detection/index/index",
          menuItem: "inspection",
        },
        {
          src1: "/static/index/nav4.png",
          label: "企业服务",
          path: "/pages/hub_zsyg/owner/index",
          menuItem: "enterprise",
        },
        {
          src1: "/static/index/nav5.png",
          label: "危货服务",
          path: "#",
          menuItem: "dangerousGoods",
        },
        {
          src1: "/static/index/nav1.png",
          label: "运政服务",
          path: "/pages/hub_zsyg/index/index",
          menuItem: "transportation",
        },
        {
          src1: "/static/index/nav1.png",
          label: "个人服务",
          path: "/pages/hub_zsyg/prac/usercenter/index",
          menuItem: "personal",
        },
      ],
      perCodeList: [],
    };
  },
  computed: {
    hasPermissions() {
      return this.perCodeList.length > 0;
    },
    filteredNavList() {
      return this.navList.filter((item) =>
        hasMenuPermission(this.perCodeList, item.menuItem)
      );
    },
  },
  mounted() {
    // 从本地存储获取 perCodeList
    this.perCodeList = uni.getStorageSync("perCodeList") || [];
  },
};
</script>

<style lang="scss" scoped>
.index-content {
  margin-top: 60px;
  .service-section {
    .section-title {
      font-size: 16px;
      font-weight: bold;
      color: #0d1444;
    }
    .nav_each {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin: 10px 0;
      background-color: #ffffff;
      border-radius: 4px;

      .nav_view {
        width: 25%;
        text-align: center;
        display: inline-block;
        position: relative;
        padding: 16px 0 10px 0;

        .nav_img {
          width: 44px;
          height: 28px;
        }

        .nav_text {
          color: #0d1444;
          display: block;
          text-align: center;
          font-size: 14px;
          margin: 0 0 5px 0;
        }
      }
    }
  }
  .no-permission {
    background-color: #ffffff;
    border-radius: 4px;
    padding: 20px;
    text-align: center;
    color: #999;
    font-size: 14px;
  }
}
</style>
